<template>
  <div class="video-ProductLibrary">
    <div class="video-ProductLibrary-left">
      <el-scrollbar class="infinite-list">
        <div
          class="video-ProductLibrarylist-moder"
          v-for="(its, ProductLibraryid) in ProductInventoryArr"
          :key="ProductLibraryid"
          :class="
            [selectedIndex == ProductLibraryid ? 'video-ProductLibrarylistactive' : '']
          "
          @click="GetClassDatas(ProductLibraryid)"
        >
          <p
            class="video-ProductLibrarylist-system"
            :class="selectedIndex == ProductLibraryid ? 'video-fontcolor' : ''"
          >
            {{ its.system }}
          </p>
          <p
            class="video-ProductLibrarylist-sonsystem"
            :class="selectedIndex == ProductLibraryid ? 'video-fontcolor' : ''"
          >
            {{ its.sonsystem }}
          </p>
          <p
            class="video-ProductLibrarylist-sonsystemname"
            :class="selectedIndex == ProductLibraryid ? 'video-fontcolor' : ''"
          >
            {{ its.sonsystemname }}
          </p>
          <img class="video-ProductLibrarylist-systemimg" :src="its.systemimg" />
        </div>
      </el-scrollbar>
    </div>
    <div class="video-ProductLibrary-right">
        <div class="ProductLibrary-Video-title"><span>{{Videotitle}}</span></div>
        <div class="ProductLibrary-Video-title-two"><span>{{Videotitletwo}}</span></div>
       <VueAliplayer v-bind:playauth="playauth" :vid='vid' ref="VueAliplayer"></VueAliplayer>
      <div>
        <span class="ProductLibrary-introduction-style"></span
        ><span class="ProductLibrary-introduction">产品简介</span>
        <p class="ProductLibrary-introduction-text">
          {{ Systext }}
        </p>
      </div>
      <div>
        <span class="ProductLibrary-SimulationTasks-style"></span
        ><span class="ProductLibrary-SimulationTasks">视频个数</span>
        <p class="ProductLibrary-SimulationTasks-text">{{VidLenght}}个</p>
      </div>
      <div class="ProductLibrary-VideoAll">
        <el-scrollbar class="infinite-list">
          <div class="ProductLibrarylist-Videomoder"
          v-for="(its, Videoid) in VideoName"
          :key="Videoid"
          @click="GetClassVideo(Videoid)"
          v-show="ShowVideoboolean"
          :class="selectedVideoIndex == Videoid ? 'ProductLibraryVideoactive' : ''">
          <span class="ProductLibrarylist-Videomoder-text">{{its.name}}</span></div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import VueAliplayer from "@/components/TeachingResources/VueAliplayer.vue";
import { postData } from "@/assets/js/pubilcs.js";
export default {
  name: "ProductInventory",
  props: {},
  components:{
    VueAliplayer,
  },
  data() {
    return {
      Videotitle:"新能源汽车",
      Videotitletwo:"高压组件更新与维护技能视频",
      timer:'',
      ShowVideoboolean:true,
      selectedVideoIndex:0,
      VideoName:
      [
        {name:"1.作业准备-安全防护与外检作业"},
        {name:"2.安全防护,前舱附件,制动系统,电机（电池）冷却系统的检查"},
        {name:"3.暖风水加热系统,冷却系统,高压组件,充电系统的检查"},
        {name:"4.低压电源系统,转向系统,仪表板,空调系统,动力电池数据流的检查"},
        {name:"5.检查灯光系统,高压管理系统,故障码和标准断电"},
        {name:"6.散热器,冷凝器,传动系统,前后悬架,制动系统的检查"},
        {name:"7.动力电池系统检查与紧固,动力总成系统的检查"},
        {name:"8.减速器油液和电机（电池）冷却液的更换"},
        {name:"9.高压线束烧蚀,绝缘性状态的检查"},
        {name:"10.高压线束及高压组件状态"},
        {name:"11.车载充电机的拆卸及输入端输出端绝缘性的检测"},
        {name:"12.电机三相线束的检测"},
        {name:"13.安装高压部件"},
        {name:"14.冷却液的加注和排气及漏液情况的检查"},
        {name:"15.竣工检验及整理作业"},

      ],
      VidLenght:'',
      //播放凭证
      playauth:'',
      vid:'7300cb9b16614acf81eb8d867115bcf3',
      VidArr:[
        '7300cb9b16614acf81eb8d867115bcf3',
        '0bb8927fad484ffa9232ba7c601fac80',
        'c976b3f34f5142bfbddf7853c1929f94',
        '4eab09e500364690909f2f73a3d07315',
        'f9377bdaa1f644c38f9f507adbbe1065',
        'fa9a2085bee54764926089c3df0e74d7',
        '23bb56d5c4ec4aad82fd015661342d73',
        'b436b561349f48268affbe1c8b65b0cd',
        'cf61501136cf4dec8056f0f3808c0b96',
        'aef0c263167b4d5f8702394d056b5daf',
        '207384ff31794f1e9b12cc5d2f44c709',
        '3088b434774b4794b75b615916a87e4a',
        '751ec8adc26b485aa775425066f35ef9',
        '829f0996e6884b6eb3860f3a1cd319f2',
        '851896641fdd4f3a937c695f13462db0',
      ],
      ActiveLibraryidArr: [0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1],
      xingxing: ["★", "★★", "★★★", "★★★★", "★★★★★★"],
      productLibraryid: 0,
      selectedIndex: 0,
      Showimg: "/img/productLib/P10013.png",
      Showsystem: "暂无数据",
      Showsonsystem: "暂无数据",
      Systext: "",
      ProductInventoryArr: [
        {
          system: "新能源汽车",
          sonsystem: "高压组件更换与维护技能视频",
          sonsystemname: "吉利帝豪EV450",
          systemimg: "/img/productLib/P10013.png",
          systext:
            "本技能视频是由参赛一线指导教师指导拍摄，严格按照国家新能源汽车技能大赛项目流程拍摄，将比赛流程分解为若干实训模块，分步讲解。",
        },
      ],
    };
  },
  created() {
    this.InitAllData();
    this.VidLenght = this.VidArr.length
    let self = this
    postData("/api/AlyServer/GetVideoPlayAuth",JSON.stringify({vid:self.vid})).
    then(function (res) {
      
      self.playauth =res.result.result
    })
    .catch((error) => {

    });
  },
  beforeDestroy () {
    
  },
  mounted(){
    let self = this
    
  },
  // beforeRouteLeave(){
  //   this.$refs.VueAliplayer.pause()
  // },
  methods: {
    GetClassDatas(ProductLibraryid) {
      this.selectedIndex = ProductLibraryid;
      this.Showimg = this.ProductInventoryArr[ProductLibraryid].systemimg;
      this.Showsystem = this.ProductInventoryArr[ProductLibraryid].system;
      this.Showsonsystem = this.ProductInventoryArr[ProductLibraryid].sonsystem;
      this.Systext = this.ProductInventoryArr[ProductLibraryid].systext;
    },
    //选择的视频集数
  GetClassVideo(Videoid){
      let self = this
      clearInterval(self.timer); //清除计时器
      self.timer=null
      self.selectedVideoIndex = Videoid
      self.ShowVideoboolean = false
    postData("/api/AlyServer/GetVideoPlayAuth",JSON.stringify({vid:self.VidArr[Videoid]})).
      then(function (res) {
        if(res.success){
          self.playauth =res.result.result
        }
      })
      .catch((error) => {

      });
      self.vid = self.VidArr[Videoid]
      self.$nextTick(() => {
        self.$refs.VueAliplayer.initAliplayer()
      })
      self.timer= setTimeout(function () {
        self.ShowVideoboolean = true
      }, 500);
    },
    //初始化数据
    InitAllData() {
      this.Showimg = this.ProductInventoryArr[0].systemimg;
      this.Showsystem = this.ProductInventoryArr[0].system;
      this.Showsonsystem = this.ProductInventoryArr[0].sonsystem;
      this.Systext = this.ProductInventoryArr[0].systext;
    },
  },
};
</script>

<style lang="less">
.video-ProductLibrary {
  position: absolute;
  height: 100%;
}
.video-ProductLibrary-left {
  position: absolute;
  left: 160px;
  top: 100px;
  width: 1140px;
  height: calc(100% - 110px);
  background: #ffffff;
  border-radius: 10px;
}
.video-ProductLibrary-left .el-scrollbar__view {
  display: flex;
  flex-wrap: wrap;
}
.video-ProductLibrary-left .infinite-list {
  position: absolute;
  width: 100%;
  height: 100%;
}
.video-ProductLibrary-left .el-scrollbar__wrap {
  overflow-x: hidden;
}
.video-ProductLibrarylist-moder {
  margin-left: 40px;
  margin-top: 30px;
  width: 320px;
  height: 320px;
  background: #ffffff;
  box-shadow: 0px 10px 80px 0px rgba(129, 133, 156, 0.2);
  border-radius: 20px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  text-align: center;
}
.video-ProductLibrarylist-moder p{
  margin-top: 10px;
}
.video-ProductLibrarylist-system {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(0deg, #807de1 0%, #218cde 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  // line-height:56px;
  text-align: center;
}
.video-ProductLibrarylist-sonsystem {
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  // padding-bottom: 10px;
  text-align: center;
}
.video-ProductLibrarylist-sonsystemname {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  // line-height: 36px;
  opacity: 0.5;
  text-align: center;
}
.video-ProductLibrarylist-systemimg {
  width: auto;
  height: auto;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
.video-fontcolor {
  background: #ffffff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
// //改变div灰度
// .video-grayscale{
//   -webkit-filter: grayscale(100%);
//   -moz-filter: grayscale(100%);
//   filter: grayscale(100%);
// }
.video-ProductLibrary-right {
  position: absolute;
  left: 1342px;
  top: 100px;
  width: 540px;
  height: calc(100% - 110px);
  background: #ffffff;
  border-radius: 10px;
}
.video-ProductLibrary-name {
  left: 40px;
  right: 40px;
  position: absolute;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #1b1b1d;
  line-height: 56px;
}
.video-ProductLibrary-system {
  position: absolute;
  left: 40px;
  top: 65px;
  font-size: 18px;
  font-family: PingFang SC;
  color: #81859c;
}
.video-ProductLibrary-img {
  position: absolute;
  left: 40px;
  top: 120px;
  width: 460px;
  height: 240px;
  background: linear-gradient(0deg, #807de1, #218cde);
  border-radius: 10px;
}

.ProductLibrary-introduction-style {
  position: absolute;
  left: 60px;
  top: 402px;
  width: 4px;
  height: 14px;
  background: linear-gradient(0deg, #807de1, #218cde);
}
.ProductLibrary-introduction {
  position: absolute;
  left: 75px;
  top: 380px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  line-height: 56px;
}
.ProductLibrary-introduction-text {
  position: absolute;
  left: 60px;
  top: 436px;
  width: 440px;
  height: 80px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #1b1b1d;
  line-height: 24px;
  text-indent: 20PX;
}
.ProductLibrary-SimulationTasks-style {
  position: absolute;
  left: 60px;
  top: 569px;
  width: 4px;
  height: 14px;
  background: linear-gradient(0deg, #807de1, #218cde);
}
.ProductLibrary-SimulationTasks {
  position: absolute;
  left: 75px;
  top: 547px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  line-height: 56px;
}
.ProductLibrary-SimulationTasks-text {
  position: absolute;
  width: 38px;
  left: 90px;
  top: 603px;
  height: 16px;
  font-size: 16px;
  font-family: Arial;
  font-weight: 400;
  color: #1b1b1d;
  line-height: 24px;
}
.ProductLibrary-VideoAll{
  position: absolute;
  width: 445px;
  height: 250px;
  left: 55px;
  bottom: calc(100% - 900px);
  
}
.ProductLibrary-VideoAll .infinite-list {
  position: absolute;
  width: 100%;
  height: 100%;
}
.ProductLibrarylist-Videomoder{
  width: 425px;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: black;
  margin-top: 15px;
  margin-left: 5px;
  cursor: pointer;
  border-radius: 5px ;
}
.ProductLibrarylist-Videomoder-text{
  font-size: 12px;
}
// .ProductLibrary-VideoAll .el-scrollbar__view {
//   display: flex;
//   flex-wrap: wrap;
// }
.ProductLibrary-VideoAll .el-scrollbar__wrap {
  overflow-x: hidden;
}
//点击改变背景色
.video-ProductLibrarylistactive {
  background: linear-gradient(0deg, #0974d8, #3d8ef1, #7c7ff8);
  box-shadow: 0px 10px 80px 0px rgba(129, 133, 156, 0.25);
  border-radius: 20px;
}
.ProductLibraryVideoactive{
  color: #fff;
  background: linear-gradient(0deg, #0974d8, #3d8ef1, #7c7ff8);
  box-shadow: 0px 10px 80px 0px rgba(129, 133, 156, 0.25);
}
.ProductLibrary-Video-title{
  left: 40px;
  right: 40px;
  position: absolute;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #1b1b1d;
  line-height: 56px;
}
.ProductLibrary-Video-title-two{
  position: absolute;
  left: 40px;
  top: 65px;
  font-size: 18px;
  font-family: PingFang SC;
  color: #81859c;
}
</style>
